<template>
	<view class="container">

		<view class="oldaddress" @click="copy">
			<view class="topview">
				<view class="name">{{cardInfo.username}}</view>
				<view class="phone">{{cardInfo.phone}}</view>
			</view>
			<view class="building">
				{{cardInfo.address}}
			</view>

		</view>





		<!-- 新增 -->
		<!-- <button type="primary" plain="true" class="btn" @click="toadd">添加新地址</button> -->
	</view>
</template>


<script>
	export default {
		data() {
			return {
				cardInfo: {
					username: '张广明',
					address: '广东省湛江市麻章区湖秀路一号（南亚热带作物研究所）',
					phone: '13356507820',
				}

			}

		},
		methods: {
			copy() {
				uni.setClipboardData({
					data: this.cardInfo.phone,
					success: function() {
						// console.log('success'); //调用方法成功
						uni.showToast({
							title:'已复制电话号码',
							duration: 2000,
							icon:"success"
						})
					}
				})
			},
			toadd() {
				uni.navigateTo({
					url: '/pages/address/address',
					fail(error) {
						console.log(error)
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100vw;
		height: 95vh;
		background-color: rgb(255, 255, 255);
		padding-top: 2vh;
	}

	//动画
	@keyframes identifier {
		from {
			transform: translateX(-1900px);
			// transform: translate(80,100);
		}

		to {
			transform: translateX(0px);

		}
	}


	.oldaddress {
		width: 94vw;
		// height: 300rpx;
		// background-color: #57815C;
		// background-image: radial-gradient(#5e8372, #315142);
		border-radius: 20px;
		padding: 5% 5% 2%;
		box-sizing: border-box;
		margin: 3%;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
		animation: identifier 1s ease 0s 1 normal forwards;

		.topview {
			width: 100vw;

			.name {
				display: inline-block;
				width: 40%;
				font-size: 20px;
				color: #235fac;
			}

			.phone {
				display: inline-block;
				width: 40%;
				text-align: right;
				font-size: 20px;
				color: #235fac;
			}

		}

		.building {
			margin-top: 16px;
			font-size: 18px;
			color: #235fac;
			padding-bottom: 50rpx;
			border-bottom: 1px solid #ccc;
		}
	}

	.editing {
		display: flex;
		justify-content: flex-end;
		margin: 10px;

		.pho {
			width: 23px;
			height: 23px;
			vertical-align: middle;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.word1 {
			font-size: 18px;
			margin-left: 5px;
			vertical-align: middle;
			margin-right: 10px;
		}

		.word {
			font-size: 18px;
			margin-left: 5px;
			vertical-align: middle;
		}
	}

	.btn {
		width: 70%;
	}
</style>
